// import html2canvas from 'html2canvas'

// export default function (node) {
//     html2canvas(node).then(canvas => {
//         let range = document.createRange();
//         range.selectNode(node);
//         let rect = range.getBoundingClientRect();

//         let ctx = canvas.getContext('2d')
//         ctx.clip();
//         let newUrl = canvas.toDataURL('image/jpeg', 0.92);//base64 格式

//         let iframe = document.createElement('iframe')
//         iframe.style = 'width: 1000px;height: 1000px;'
//         iframe.src = location.href
//         document.body.appendChild(iframe)

//         let win = iframe.contentWindow;
//         win.onload = function() {
//             this.document.body.innerHTML = ''
//             let img = this.document.createElement('img')
//             img.src = newUrl;
//             this.document.body.appendChild(img)
//             // this.print()
//             // this.onafterprint = function() {
//             //     document.body.removeChild(iframe)
//             // }
//         }`
//     })
// }
import _axios from 'axios'
export default function (itemsList, contentList, title, basicInfo) {
    _axios({
        method: 'get',
        url: '../../../static/css/table_print.css'
    }).then((res) => {
        let _style = `<style>${res.data}</style>`;
        let newWindow = window.open("", "_blank");
        // 新窗口的document
        let doc = newWindow.document
        doc.title = '打印窗口'
        // 添加新窗口样式
        doc.head.innerHTML = _style;
        // 表单头
        let table_header = '';
        let table_width = 0;
        itemsList.map((ele, index) => {
            table_width += Number(ele.width);
            console.log(ele.width);
            table_header += `<div class='items' style='width:${ele.width}px; border-left: ${index === 0 ? '1px solid #000' : 0}'>${ele.label}</div>`
        })

        let table_body = '';
        contentList.map((item, ind) => {
            let items = ''
            itemsList.map((ele, index) => {
                items += `<div 
                            class='items' 
                            style='width: ${ele.width}px; 
                            border-bottom: ${ind === contentList.length - 1 ? '1px solid #000' : 0};
                            border-left: ${index === 0 ? '1px solid #000' : 0}'
                        >
                            ${item[ele.prop]}
                        </div>`
            })
            table_body +=`<div class='lines'>${items}</div>`
        })
        let html = '';
        if(basicInfo) {
            html = `
                <div class='basicInfo'>
                    <div>
                        <div>退货单号：${basicInfo.returnId}</div>
                        <div>客户：${basicInfo.clientName}</div>
                        <div>结算单号：${basicInfo.statementId}</div>
                    </div>
                    <div>
                        <div>退货日期：${basicInfo.createTime}</div>
                        <div>供应商代码：${basicInfo.supplierId}</div>
                    </div>
                    <div>
                        <div>
                            ${basicInfo.barCode}
                        </div>
                    </div>
                </div>
            `
        }
        // 给窗口界面重新赋值，赋自己拼接起来的html内容
        newWindow.document.body.innerHTML = `
            <div class='container'>
                <div class='title'>${title}</div>
                ${html}
                <div class='table_container' style='width: ${table_width}px'>
                    <div class='table_header'>
                        ${table_header}
                    </div>
                    <div class='table_body'>
                        ${table_body}
                    </div>
                </div>
            </div>
        `;
        // 调用window.print方法打印新窗口
        newWindow.print();
        newWindow.onkeypress = function(e) {
            console.log(e)
        }
        newWindow.onafterprint = function() {
            //关闭窗口
            newWindow.close()
        }
    });
}
